<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加课程</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="../css/radio.css">
	<style>
		form {
			margin-bottom: 30px;
		}

		.layui-row {
			margin-top: 50px;
		}

		.tips {
			font-size: 14px;
			color: #9C9C9C;
			margin-left: 25px;
		}

		.textarea {
			min-height: 200px;
			padding-top: 10px;
		}

		.poster {
			width: 100px;
			height: 100px;
		}
	</style>
</head>

<body>


	<div class="layui-row" id="vue-root">
		<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" id="file" ref="file" name="file" v-validate="'size:10240'" accept="image/*"
				@change="upload">
		</form>

		<div class="layui-col-md6 layui-col-md-offset3">
			<div class="layui-form-item">
				<label class="layui-form-label">课程名称</label>
				<div class="layui-input-block">
					<input name="name" v-validate="'required'" data-vv-as="课程名称" autocomplete="off"
						placeholder="请输入课程名称" class="layui-input name" v-model="item.name">
					<div class="checkout_state" v-text="err('name')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">课程海报</label>
				<div class="layui-input-block">
					<label for="file">
						<img class="poster" :src="img">
					</label>
					<div class="checkout_state"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">提前签到时间</label>
				<div class="layui-input-block">
					<input name="startMinute" v-validate="'required'" data-vv-as="起始时间" autocomplete="off" type="number"
						placeholder="请输入提前签到时间，单位：分钟" class="layui-input name" v-model="item.startMinute">
					<div class="checkout_state" v-text="err('startMinute')"></div>
					<p class="tips">*本次课时开始前多少分钟可以开始签到，到本节课结束时都可以打卡签到</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">离校打卡时长</label>
				<div class="layui-input-block">
					<input name="endMinute" autocomplete="off" type="number" placeholder="请输入离校打卡时长，单位：分钟"
						class="layui-input name" v-model="item.endMinute">
					<p class="tips">说明：课程后结束后多少分钟内打卡视为离校（若设置）</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">授课老师</label>
				<div class="layui-input-block">
					<select class="layui-input name" v-model="item.teacherId" v-validate="'required'" name="teacherId"
						data-vv-as="授课老师">
						<option :value="undefined" disabled="disabled">请选择老师</option>
						<option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id" v-text="teacher.name">
						</option>
					</select>
					<div class="checkout_state" v-text="err('teacherId')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">课程价格</label>
				<div class="layui-input-block">
					<input v-model="fee" type="number" style="width: 25% !important;margin-right: 3%;"
						placeholder="课程价格" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">报名人数上限</label>
				<div class="layui-input-block">
					<input v-model="item.maxSign" v-validate="'required|integer'" name="maxSign" data-vv-as="报名人数上限"
						style="width: 25% !important;margin-right: 3%;" class="layui-input" type="number">
					<div class="checkout_state" v-text="err('maxSign')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">报名截止日期</label>
				<div class="layui-input-block">
					<input name="signEndTime" v-validate="'required'" data-vv-as="报名截止" autocomplete="off"
						placeholder="请输入报名截止日期" class="layui-input" v-model="item.signEndTime" id="signEndTime">
					<div class="checkout_state" v-text="err('signEndTime')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">课程简介</label>
				<div class="layui-input-block">
					<textarea class="layui-input name textarea" v-model="item.intro"></textarea>
					<div class="checkout_state"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否显示</label>
				<div class="layui-input-block" style="padding-top: 13px;line-height: 15px;">
					<input type="radio" name="show" :value="true" title="是" v-model="item.show">
					<span>是</span>
					<input type="radio" name="show" :value="false" title="否" v-model="item.show"
						style="margin-left: 20px;">
					<span>否</span>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>

		var schoolId = top_params().id;


		var app = new Vue(merge({
			data: {
				item: {
					disabled: false,
					pic: null,
					show: false
				},
				teachers: [],
				url: '/pc/lesson',
				fee: null
			},
			created: function () {
				axios.get('/pc/teacher/all/' + schoolId).then(function (res) {
					this.teachers = res.data;
				}.bind(this));
				this.init();
			},
			methods: {
				upload: function () {
					this.$validator.validate('file').then(function (result) {
						if (!result) {
							alert('上传文件大小应在10MB以内');
							this.$refs.file.value = '';
							return;
						}

						axios.post('/pc/upload/lesson?schoolId=' + schoolId,
							new FormData(this.$refs.form)).then(function (res) {
								this.item.pic = res.data.data;
								this.$refs.file.value = '';
							}.bind(this));

					}.bind(this));
				},
				formatData: function (data) {
					this.fee = data.fee / 100;
					data.signEndTime = dayjs(data.signEndTime).format('YYYY-MM-DD HH:mm:ss');
				},
				fillData: function () {
					var fee = this.fee && this.fee > 0 ? this.fee : 0;
					this.item.fee = (fee * 100).toFixed(0);
				}
			},
			computed: {
				img: function () {
					if (!this.item.pic) return '../image/upload.png';
					return '/static/' + schoolId + '/lesson/' + this.item.pic;
				}
			}
		}));

		laydate.render({
			elem: '#signEndTime',
			type: 'datetime',
			done: function (value, date, endDate) {
				app.item.signEndTime = value;
			}
		});
	</script>

</body>

</html>